<template>
  <div style="width: 100%; height: 100%; margin: auto">
    <div style="height: 150px">
      <el-progress
        type="circle"
        :percentage="percentage"
        :color="colors"
      ></el-progress>
    </div>
    <el-badge is-dot :value="news" class="item">
      <el-button size="small">评论</el-button>
    </el-badge>
    <el-badge :value="hots" class="item">
      <el-button size="small">回复</el-button>
    </el-badge>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      myInterval: "",
      percentage: 0,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#f56c6c", percentage: 40 },
        { color: "#e6a23c", percentage: 60 },
        { color: "#e6a23c", percentage: 80 },
        { color: "#5cb87a", percentage: 100 },
      ],
      finishCount: 0, //完成的数量
      checkPersonCount: 0, //选择人数进行校核的数量
      msgShow: false,
      news:"新的",
      hots:"提示"
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  destroyed() {
    clearInterval(this.myInterval);
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.visible = true;
      this.percentage = 0;
      this.isCheckFinish();
    },
    isCheckFinish() {
      let that = this;
      this.myInterval = window.setInterval(() => {
        setTimeout(() => {
          //调用接口的方法
          // list中的finishCount值和checkPersonCount值都是可以改变的，改变这些值可以让圆形的进度条根据具体的值改变
          let list = { finishCount: "20", checkPersonCount: "206" };
          that.percentage = Math.floor(
            Math.round((list.finishCount / list.checkPersonCount) * 10000) / 100
          );
        }, 1);
      }, 1000);
    },
  },
};
</script>
  
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
  